<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>weizhi</title>
    <style>
      .quanbu {
        width: 600px;
        height: 260px;
        background: #e92f0a;
        margin: auto;
      }

      .zuobian {
        width: 175px;
        height: 260px;
        background: #be6404;
        float: left;
      }
      .youbian {
        width: 425px;
        height: 260px;
        background: #b8063e;
        float: left;
      }

      .shangqu {
        width: 425px;
        height: 155px;
        background: #deee07;
      }
      .xiaqu {
        width: 425px;
        height: 105px;
        background: #80ec04;
      }

      .zuoshang {
        width: 175px;
        height: 105px;
        background: #07d32c;
        font-family: "Times New Roman", Times, serif;
        padding-top: 20px;
        font-weight: 800;
        padding-left: 20px;
      }
      .zuoxia {
        width: 175px;
        height: 135px;
        background: #4f8503;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(https://www.pdsu.edu.cn/images/fgt12.jpg);
      }

      .youshang_zuo {
        width: 188px;
        height: 155px;
        background: #09d0d0;
        float: left;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(https://www.pdsu.edu.cn/images/fgt11.jpg);
      }
      .youshang_zhong {
        width: 132px;
        height: 155px;
        background: #d0a855;
        writing-mode: vertical-rl;

        float: left;
      }
      .youshang_you {
        width: 105px;
        height: 155px;
        background: #e9cba0;
        float: left;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(https://www.pdsu.edu.cn/images/1.JPG);
      }

      .youxia_zuo {
        width: 125px;
        height: 105px;
        background: #e95656;
        font-family: "Times New Roman", Times, serif;
        font-weight: 200;

        float: left;
      }
      .youxia_zhong {
        width: 125px;
        height: 105px;
        background: #0940d7;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(https://www.pdsu.edu.cn/images/fgt14.jpg);
        float: left;
      }
      .youxia_you {
        width: 175px;
        height: 105px;
        background: #8b7929;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(https://www.pdsu.edu.cn/images/fgt13.jpg);
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="quanbu">
      <div class="zuobian">
        <div class="zuoshang">校园风光<br>XIAOYUANFENGGUANG</br></div>
        <div class="zuoxia"></div>
      </div>
      <div class="youbian">
        <div class="shangqu">
          <div class="youshang_zuo"></div>
          <div class="youshang_zhong">学术研究<br>xueshuyanjiu</br></div>
          <div class="youshang_you"></div>
        </div>
        <div class="xiaqu">
          <div class="youxia_zuo">
            学生活动<br>xueshenghuodong</br>
          </div>
          <div class="youxia_zhong"></div>
          <div class="youxia_you"></div>
        </div>
      </div>
    </div>
  </body>
</html>
